<template>
	<div class="container">
		<st-navigation title="我的收藏" @computedSize="handleComputedSize"></st-navigation>
		<view class="filter-w" :style="{ 'top': `${navBarHeight}px` }">
			<view class="top-wrap ysm-mt">
				<!-- <view class="item_wrap " @click="handleStyle">
				风格 <uni-icons class="icon" type="bottom" size="16"></uni-icons>
			</view>
			<view class="item_wrap">
				类型 <uni-icons class="icon" type="bottom" size="16"></uni-icons>
			</view> -->
				<view class="item_wrap">
					<view class="item-select-wrap">
						<uni-data-select value="类型" v-model="typeValue" :localdata="typeOptions" @change="typeChange" placeholder="类型"
							:clear="false" class="select-wrap"></uni-data-select>
					</view>
				</view>
				<view class="item_wrap">
					<view class="item-select-wrap">
						<uni-data-select value="风格" v-model="styleValue" :localdata="styleOptions" @change="styleChange" placeholder="风格"
							:clear="false" class="select-wrap"></uni-data-select>
					</view>
				</view>
			</view>
		</view>
		<PanoramicVideo :isShowHeader="false" :dataSource="dataSourceList" :isEmpty="isEmpty"></PanoramicVideo>
	</div>
</template>

<script> 
import PanoramicVideo from '../../ysmDesignerShop/components/PanoramicVideo.vue';
export default {
	components: {
		PanoramicVideo
	},
	data() {
		return {
			isEmpty: false,

			navBarHeight: 40,

			styleValue: -1,
			typeValue: -1,
			styleOptions: [],
			dataSourceList: [],
			isTransferData: false,

			reload: false, //判断是否上拉
			page: 1,
			last_page: 0,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载..',
				contentnomore: '没有更多数据了'
			},


			filter: {
				style: '',
				type: '',
			},


			typeOptions: [],
			allConfig: {},
		}
	},
	onLoad(option) {
		if (option.dataSouce && option.dataSouce.length > 0) {
			this.dataSourceList = JSON.parse(JSON.stringify(option.dataSouce));
			this.isTransferData = true;
		}
		this.loadData();
		this.queryConfig();
	},
	onPullDownRefresh() {
		console.log("111");
		this.page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		if (this.page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.contentText.contentdown = '上拉显示更多';
			this.page = this.page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},

	methods: {
		handleComputedSize(evt) {
			let { navBarHeight } = evt;
			this.navBarHeight = navBarHeight;
		},
		styleChange(e) {
			console.log("e:", e);
			this.styleValue = e;
			this.dataSourceList = [];
			this.loadData();
		},
		typeChange(e) {
			console.log("e:", e);
			this.typeValue = e;
			this.dataSourceList = [];
			this.loadData();
		},
		queryConfig() {
			this.$api.get({
				url: '/wanlshop/config/all',
				success: res => {
					let { type, style } = res;
					this.typeOptions = type.map((item) => {
						return {
							value: item.id,
							text: item.name
						}
					})
					// this.typeOptions.unshift({
					// 	value: 0,
					// 	text: '类型'
					// });
					// this.typeOptions.push({
					// 	value: this.typeOptions.length,
					// 	text: '别墅'
					// });
					this.styleOptions = style.map((item) => {
						return {
							value: item.id,
							text: item.name,
							disable:item.disable?item.disable:false
						}
					});
					// this.styleOptions.unshift({
					// 	value: 0,
					// 	text: '风格'
					// });
					this.allConfig = res;
					const query = uni.createSelectorQuery().in(this);
                        query.select('.item-select-wrap-type>.uni-select__selector-item').boundingClientRect(data => {
                            console.log(data)
                        }).exec();
				},
				error: err => {
					console.log(err);
				}
			})
		},
		async loadData() {
			if (this.isTransferData) {
				return;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			await this.$api.get({
				url: '/wanlshop/user/getUserCollectVideoList',
				data: {
					style: this.styleValue==-1?0:this.styleValue,
					type: this.typeValue==-1?0:this.typeValue,
					user_id: this.$store.state.user.id,
				},
				success: res => {
					console.log(res);
					uni.stopPullDownRefresh();
					this.status = 'more';
					this.dataSourceList = this.reload ? res.data : this.dataSourceList.concat(res.data); //数据 追加
					this.page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码

					if (this.dataSourceList.length == 0) {
						this.isEmpty = true;
					} else {
						this.isEmpty = false;
					}
				},
			});

			uni.hideLoading();


		},
	}
}
</script>

<style scoped lang="less">
page {
	background-color: #fff;
}

.ysm-mt {
	margin-bottom: 20rpx;
}

.container {
	background-color: #fff;
	padding: 32rpx;
	height: 100%;
	padding-top: 110rpx;

	.filter-w {
		height: 100rpx;
		position: fixed;
		top: 100rpx;
		left: 0;
		width: 100%;
		z-index: 10;
		background: #fff;
		padding: 20rpx 30rpx;
	}
	.top-wrap {
		display: flex;
		align-items: center;
		justify-content: space-around;
		border: 0.5px solid #E6E6E6;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
		border-radius: 8px;

		.item_wrap {
			flex: 1;
			margin: 0 auto;
			text-align: center;
			display: flex;
			justify-content: center;

			&:nth-child(2) .item-select-wrap{
				margin-left: -20px;
			}
			/deep/ ::-webkit-scrollbar {
					/*滚动条整体样式*/
					width: 4px !important;
					height: 1px !important;
					overflow: auto !important;
					background: #ccc !important;
					-webkit-appearance: auto !important;
					display: block;
				}
			
				/deep/ ::-webkit-scrollbar-thumb {
					/*滚动条里面小方块*/
					border-radius: 10px !important;
					box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
					background: #7b7979 !important;
				}
			
				/deep/ ::-webkit-scrollbar-track {
					/*滚动条里面轨道*/
					// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
					// border-radius: 10px !important;
					background: #FFFFFF !important;
				}
		}
		.item-select-wrap {
			width: 250rpx;

			/deep/ .uni-select__input-box {
				display: flex;
				justify-content: center;
				.uni-select__input-text {
					width: 130rpx !important;
				}
			}
			

			text-align: center;

			

			/deep/.select-wrap {
				.uni-select {
					border: none;
				}
				/* .uni-select__selector-item {
					padding: 0 8rpx;
				} */
			}

			.icon {
				margin-left: 16rpx;
				color: #333;
			}
		}
	}
}
</style>